<template>
  <div class="addMission">
     <div class="back" @click="back()"><i class="el-icon-arrow-left"></i>返回</div>
    <el-form
      :model="addForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="采样时间" prop="samplingTime">
        <el-date-picker
          v-model="addForm.samplingTime"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="采样人" prop="samplingPerson">
        <el-select v-model="addForm.samplingPerson"  placeholder="请选择操作人">
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测机构" prop="inspectionInstitution">
        <el-input v-model="addForm.inspectionInstitution"> </el-input>
      </el-form-item>
      <el-form-item label="采样照片">
        <upload ref="upload"   @getPicture="getPicture" :fileList="addForm.picture"></upload>
      </el-form-item>
      <el-form-item label="分析报告">
        <uploadReport ref="uploadReport"   @getReport="getReport" :reportList="addForm.analyseReport"></uploadReport>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 农资弹窗 -->
  </div>
</template>

<script>
import {
  delpictureApi,
  getUserListApi
} from '@/api/mission'
import { addRepaotApi } from '@/api/agriLand'
import upload from './components/upload.vue'
import uploadReport from './components/uploadReport.vue'
export default {
  name: 'SevencolorUserIndex',
  components: {
    upload, // 上传组件
    uploadReport
  },

  data () {
    return {
      addForm: {
        baseId: '',
        landId: 1,
        participants: '', // 操作人
        participantsId: '', // 操作人Id
        time: '',
        way: '', // 操作方式
        picture: [],
        remark: '',
        agriList: []
      },
      params: {
        current: 1,
        pageSize: 2
      },
      total: null,
      baseId: 1,
      rules: {
        samplingTime: [{ required: true, message: '请选择采样时间', trigger: 'blur' }],
        samplingPerson: [
          { required: true, message: '请选择采样人', trigger: 'blur' }
        ],
        inspectionInstitution: [
          { required: true, message: '请选择操作人', trigger: 'blur' }
        ]
      },
      options: [],
      userList: [] // 用户字典
    }
  },
  computed: {
    token () {
      return { token: this.$store.getters.userInfo.token }
    }
  },

  mounted () {
    console.log(this.$route.query)
    this.addForm.baseId = this.$route.query.baseId
    this.addForm.landId = this.$route.query.landId
    this.getUserList()
    this.$store.dispatch('mission/removePictureList')
  },

  methods: {
    getPicture (e) {
      console.log(e)
      this.addForm.picture = e.join(',')
    },
    getReport (e) {
      this.addForm.analyseReport = e.join(',')
    },
    // 用户list
    async getUserList () {
      const res = await getUserListApi(this.baseId)
      // console.log(res)
      this.userList = res.data
    },
    // 返回
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriLandDetail',
        query: {
          ...this.$route.query
        }
      })
    },
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$message('submit!')
          console.log(this.addForm)
          const res = await addRepaotApi(this.addForm)
          if (res.code === 200) {
            this.$message.success('提交成功')
          }
          this.addForm = {}
          this.$router.push({
            path: '/shuzhongtian/agriLandDetail',
            query: {
              ...this.$route.query
            }
          }) // 返回详情
        } else {
          this.$message.error('请正确填写')
          return false
        }
      })
    },
    // 农资弹窗关闭
    handleClose (dome) {
      dome()
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$refs.upload.clearFiles()
      if (this.pictureList.length > 0) {
        for (let i = 0; i < this.pictureList.length; i++) {
          delpictureApi(this.pictureList[i])
        }
        this.$store.dispatch('mission/removePictureList')
      }
    }
  }
}
</script>
<style scoped lang="scss">
.addMission {
  width: 80.2083vw;
  height: 48.4375vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  position: relative;
  padding: 4.5313vw * 0.834 3.6458vw;
  overflow-y: auto;
  ::v-deep .el-input__inner {
    width: 3.5rem !important;
  }
}
.back {
  position: absolute;
  top: 3%;
  left: 3%;
  font-size: 24px;
}

.farmStockListBox {
  .farmStockList {
    width: 23.9583vw;
    height: 5.1667vw * 0.834;
    background: #edf1f4;
    border-radius: 12px 12px 12px 12px;
    padding: 0.6771vw * 0.834 1.0417vw;
    display: flex;
    line-height: 4.1667vw * 0.834;
    margin-bottom: 0.5208vw;
    position: relative;
    .icon {
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 1.0417vw;
      padding: 0.5208vw;
      align-items: center;
    }
    .content {
      height: 2.9646vw * 0.834;
      white-space: nowrap;
      margin-right: 1.8229vw;
      .farmStockName {
        // margin-bottom: 0.4167vw * 0.834;
        height: 1.6021vw * 0.834;
        white-space: nowrap;
        line-height: 1.6021vw * 0.834;
      }
      .manufacturer {
        height: 1.0417vw * 0.834;
        white-space: nowrap;
        line-height: 1.6021vw * 0.834;
        font-size: 14px;
        color: #999999;
      }
    }
    .num {
      // padding: 0 0.2604vw;
      margin-top: 0.9208vw * 0.834;
      // width: 7.2917vw;
      // height: 2.0833vw * 0.834;
      // background: #ffffff;
      // border-radius: 8px 8px 8px 8px;
      // border: 1px solid #dcdedf;
      // position: relative;
      ::v-deep .el-input__inner {
        width: 1rem !important;
      }
      .unit {
        position: absolute;
        right: 10%;
        height: 1.8vw * 0.834;
        font-size: 0.7292vw;
        top: -50%;
        color: #333;
      }
    }
    .del {
      width: 1.6vw;
      height: 1.6vw;
      position: absolute;
      right: 5%;
      top: 20%;
      i {
        font-size: 1.5vw;
        color: red;
      }
    }
  }
}

.addFramStockBtn {
  width: 10.4167vw;
  height: 3.1667vw * 0.834;
  border-radius: 12px 12px 12px 12px;
  background: #e8f7ef;
  color: #19b560;
  font-weight: 600;
  font-size: 0.9375vw;
  margin-bottom: 0.5208vw * 0.834;
}
</style>
